<template>
  <div class="salary-calculation">
    <!-- 顶部功能按钮区域 -->
    <div class="function-buttons-container">
      <div class="function-buttons">
        <div class="button-group" @click="handleClick('import')">
          <img src="@/assets/导入发起工资计算.png" alt="导入图标" class="button-icon">
          <span class="button-text">导入发起工资计算</span>
        </div>

        <div class="button-group" @click="handleClick('detail')">
          <img src="@/assets/资产退库.png" alt="工资明细图标" class="button-icon">
          <span class="button-text">个人薪资看板</span>
        </div>

        <div class="button-group" @click="handleClick('structure')">
          <img src="@/assets/薪资结构.png" alt="薪资结构图标" class="button-icon">
          <span class="button-text">薪资项</span>
        </div>

        <div class="button-group" @click="handleClick('fund')">
          <img src="@/assets/个人所得税.png" alt="五险一金图标" class="button-icon">
          <span class="button-text">个人所得税</span>
        </div>

        <div class="button-group" @click="handleClick('deduction')">
          <img src="@/assets/五险一金.png" alt="专项附加扣除图标" class="button-icon">
          <span class="button-text">五险一金</span>
        </div>

        <!-- 新增的按钮 -->
        <div class="button-group" @click="handleClick('report')">
          <img src="@/assets/员工薪资结构.png" alt="薪资报表图标" class="button-icon">
          <span class="button-text">员工薪资结构</span>
        </div>
      </div>
    </div>

    <!-- 数据展示卡片区域
    <div class="data-cards">
      <el-card class="card-item">
        <div class="card-title">平均工资</div>
        <div class="card-value">{{ avgSalary }}</div>
      </el-card>

      <el-card class="card-item">
        <div class="card-title">企业应发</div>
        <div class="card-value">{{ totalEnterprisePay }}</div>
      </el-card>

      <el-card class="card-item">
        <div class="card-title">企业缴纳社保、公积金</div>
        <div class="card-value">{{ totalSocialSecurity }}</div>
      </el-card>

      <el-card class="card-item">
        <div class="card-title">企业发薪成本</div>
        <div class="card-value">{{ totalPayCost }}</div>
      </el-card>
    </div> -->
  </div>
</template>

<script>
// 假设已配置axios请求工具
import request from '@/api/request.js'
export default {
  // name: "SalaryCalculation",
  // data() {
  //   return {
  //     avgSalary: '0.00 元',        // 平均工资
  //     totalEnterprisePay: '0.00 元', // 企业应发
  //     totalSocialSecurity: '0.00 元', // 企业缴纳社保、公积金
  //     totalPayCost: '0.00 元'       // 企业发薪成本
  //   };
  // },
  // mounted() {
  //   this.calculateSalaryData();
  // },
  methods: {
    // 按钮点击事件处理
    handleClick(type) {
      console.log(`点击了${type}按钮`);
      switch(type) {
        case 'import':
          this.$router.push('/salary/outsize');
          break;
        case 'detail':
          this.$router.push('/salary/individual');
          break;
        case 'structure':
          this.$router.push('/salary/setup/disposition');
          break;
        case 'fund':
          this.$router.push('/salary/setup/rate');
          break;
        case 'deduction':
          this.$router.push('/salary/insurance');
          break;
        case 'report':
          this.$router.push('/salary/setup/empdisposition');
          break;
      }
    },

    // // 计算所有薪资数据
    // async calculateSalaryData() {
    //   try {
    //     // 并行请求薪资结构和五险一金数据
    //     const [salaryRes, securityRes] = await Promise.all([
    //       this.getYfData(),
    //       this.getWxData()
    //     ]);

    //     // 处理企业应发和平均工资
    //     const { totalBaseSalary, employeeCount } = salaryRes;
    //     this.totalEnterprisePay = this.formatCurrency(totalBaseSalary);
    //     this.avgSalary = employeeCount > 0 
    //       ? this.formatCurrency(totalBaseSalary / employeeCount) 
    //       : '0.00 元';

    //     // 处理企业缴纳社保公积金
    //     this.totalSocialSecurity = this.formatCurrency(securityRes);

    //     // 计算企业发薪成本
    //     const totalPay = totalBaseSalary + securityRes;
    //     this.totalPayCost = this.formatCurrency(totalPay);

    //   } catch (error) {
    //     console.error('数据计算失败:', error);
    //   }
    // },

    // // 获取薪资结构数据（计算企业应发和平均工资）
    // async getYfData() {
    //   try {
    //     const res = await request({
    //       url: '/salary/setup/empdisposition/list',
    //       method: 'get'
    //     });

    //     if (res.success && Array.isArray(res.data)) {
    //       let totalBaseSalary = 0;
    //       const validSalaries = res.data.filter(item => 
    //         item.baseSalary !== null && !isNaN(Number(item.baseSalary))
    //       );

    //       // 计算基本工资总和
    //       validSalaries.forEach(item => {
    //         totalBaseSalary += Number(item.baseSalary);
    //       });
    //       console.log(totalBaseSalary)
    //       return {
    //         totalBaseSalary,
            
    //         employeeCount: validSalaries.length
    //       };
    //     }
    //     return { totalBaseSalary: 0, employeeCount: 0 };
    //   } catch (error) {
    //     console.error('获取薪资结构数据失败:', error);
    //     return { totalBaseSalary: 0, employeeCount: 0 };
    //   }
    // },

    // // 获取五险一金数据（计算企业缴纳总和）
    // async getWxData() {
    //   try {
    //     const res = await request({
    //       url: '/salary/setup/risks', // 假设五险一金列表接口
    //       method: 'get'
    //     });

    //     if (res.success && Array.isArray(res.data)) {
    //       let total = 0;
          
    //       res.data.forEach(item => {
    //         // 累加企业承担的五险一金项目
    //         total += this.parseNumber(item.pensionInsuranceUnit);
    //         total += this.parseNumber(item.healthInsuranceUnit);
    //         total += this.parseNumber(item.unemploymentInsuranceUnit);
    //         total += this.parseNumber(item.compensationInsuranceUnit);
    //         total += this.parseNumber(item.maternityInsuranceUnit);
    //         total += this.parseNumber(item.housingProvidentUnit);
    //       });

    //       return total;
    //     }
    //     return 0;
    //   } catch (error) {
    //     console.error('获取五险一金数据失败:', error);
    //     return 0;
    //   }
    // },

    // // 安全解析数字，防止NaN
    // parseNumber(value) {
    //   if (value === null || value === undefined) return 0;
    //   const num = Number(value);
    //   return isNaN(num) ? 0 : num;
    // },

    // // 格式化金额为带逗号分隔的字符串
    // formatCurrency(amount) {
    //   const num = Number(amount);
    //   if (isNaN(num)) return '0.00 元';
    //   return num.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + ' 元';
    // }
  }
};
</script>

<style scoped>
.salary-calculation {
  padding: 20px;
}

/* 按钮容器确保占满宽度 */
.function-buttons-container {
  width: 100%;
  margin-bottom: 30px;
}

/* 按钮组容器使用flex平均分配空间 */
.function-buttons {
  display: flex;
  width: 100%; /* 占满父容器宽度 */
  justify-content: space-around; /* 平均分配空间 */
  padding: 20px;
  background-color: #f9fafb;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 每个按钮组平均分配宽度 */
.button-group {
  display: flex;
  flex-direction: column; /* 垂直排列：图片在上，文字在下 */
  align-items: center;
  cursor: pointer;
  padding: 15px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  flex: 1; /* 每个按钮组平均分配可用空间 */
  max-width: 160px; /* 限制最大宽度，防止过大 */
}

.button-group:hover {
  background-color: #eef2f7;
  transform: translateY(-2px);
}

/* 增大图片尺寸 */
.button-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  border-radius: 8px;
  object-fit: contain;
  background-color: #ffffff;
  padding: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.button-text {
  font-size: 14px;
  color: #333;
  text-align: center;
  line-height: 1.5;
  white-space: normal; /* 允许文字换行 */
  padding: 0 5px;
}

.data-cards {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
}

.card-item {
  width: 23%;
  height: 140px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.card-item:hover {
  transform: translateY(-3px);
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .button-text {
    font-size: 13px;
  }
}

@media screen and (max-width: 992px) {
  .card-item {
    width: 48%;
    margin-bottom: 15px;
  }
  
  .button-icon {
    width: 56px;
    height: 56px;
  }
}

@media screen and (max-width: 768px) {
  .function-buttons {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .button-group {
    flex: 1 0 30%; /* 在中等屏幕上每行显示3个 */
    max-width: none;
  }
}

@media screen and (max-width: 576px) {
  .card-item {
    width: 100%;
  }
  
  .button-group {
    flex: 1 0 45%; /* 在小屏幕上每行显示2个 */
  }
  
  .button-icon {
    width: 48px;
    height: 48px;
  }
}

@media screen and (max-width: 375px) {
  .button-group {
    flex: 1 0 100%; /* 在极小屏幕上每行显示1个 */
  }
}
</style>